<template>

  <a-layout-header class="header" :style="headerStyle">
    <Logo></Logo>
    
    <div class="header_right">
      <a-button v-if="!isLogin" type="primary" @click="jumpPage('/login')">登陆</a-button>

      <a-flex v-else>
        <a-row :gutter="16" >
          <a-col class="gutter-row"
          v-for="(item, index) in buttonComponentData"
          :key="index" :span="item.span">
            <component :is="item.component" type="primary" @click="jumpPage(item.path)" >
              {{ item.text }}
            </component>
          </a-col>
        </a-row>

        <a-flex align="center" >
          <a-dropdown-button style="margin-left: 30px;"  @click="handleButtonClick">
            {{ userInfo?.userName }}
            <!-- <a-button shape="round">账号名字</a-button>
            <a-button shape="round">测试</a-button> -->
            <template #overlay>
              <a-menu @click="handleMenuClick">
                <div v-show="currentRouteName === 'editor'">
                  <a-menu-item key="1" >
                    <FolderOpenOutlined :style="{fontSize: '14px'}"/>
                    我的作品
                  </a-menu-item>
                </div>
                
                <div v-if="currentRouteName !== 'mySetting'">
                  <a-menu-item key="2">
                    <UserDeleteOutlined :style="{fontSize: '16px'}" />
                    个人设置
                  </a-menu-item>
                </div>
                
                <a-menu-item key="3">
                  <SettingOutlined :style="{fontSize: '14px'}" />
                  网站设置
                </a-menu-item>
                <a-menu-item key="4" :style="{fontSize: '14px'}">
                  <LogoutOutlined />
                  登出
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown-button>
        </a-flex>
      </a-flex>

    </div>
  </a-layout-header>

  <!-- 网站设置 -->
  <Setting />
  
</template>

<script lang="ts" setup>
import { ref, defineProps, watch } from 'vue';
import { storeToRefs } from 'pinia';
import type { CSSProperties } from 'vue';
import { useRouter, RouteRecordName } from "vue-router"
import { FolderOpenOutlined, UserDeleteOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
import { message } from 'ant-design-vue'
import Logo from "../common/logo.vue";
import Setting from '../common/Setting.vue';

import { buttonComponent, ButtonOpt } from '../../typescript/userNavBar'

const router = useRouter()

const buttonComponentData = ref<ButtonOpt[]>()

const props = defineProps<{type: string, buttonAuth: string}>()

buttonComponent.map(item => {
  if (item.buttonAuth === props.buttonAuth) {
    buttonComponentData.value = item.buttonOpt
  }
})
// 当前路由的name
const currentRouteName = ref<RouteRecordName | null | undefined>(router.currentRoute.value.name)
// console.log(666, buttonComponentData)

import useUserStore from '../../stores/module/user'
// 是否登陆/isLogin 用户信息/userInfo
const { isLogin, userInfo } = storeToRefs(useUserStore())


watch(
  () => props.type,
  () => {
    buttonComponent.map(item => {
      if (item.buttonAuth === props.buttonAuth) {
        buttonComponentData.value = item.buttonOpt
      }
    })
    currentRouteName.value = router.currentRoute.value.name
    // console.log(router.currentRoute.value.name)
  }
)

// 网站设置
import useSetting from '../../stores/module/setting'
const { openDrawer } = storeToRefs(useSetting())

// import HeadLogo from "../../assets/image/theme/headLogo.png"

const headerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: 'rgba(0, 0, 0, .5)',
  padding: '0 50px',
  zIndex: 2
};

const jumpPage = (url: string) => {
  router.push({
    path: url
  })
}
const handleButtonClick = (e: Event) => {
  console.log('click left button', e);
};

const handleMenuClick: MenuProps['onClick'] = e => {
  console.log('click', e.key );
  if (e.key === '1') {
    jumpPage('/myWork')
  }

  if (e.key === '2') {
    jumpPage('/mySetting')
  }

  if (e.key === '3') {
    openDrawer.value = true
    // openDrawer.value = true
  }

  const content = ref('退出登陆中..');
  if (e.key === '4') {
    message.loading({ content: () => content.value });
    setTimeout(() => {
      content.value = '退出登陆成功！';
      useUserStore().logout()
      jumpPage('/login')
    }, 2000)
  }
};

</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo {
    cursor: pointer;
    img {
      height: 35px;
    }
  }
 
  &_right {
    display: flex;
    
    // & > * {
    //   margin-left: 30px !important;
    // }
    .setUp {
      display: flex;
    }
  }
  
}
</style>